<template>
    <div class="home-hot">
        <div id="hidden"></div>
        <div class="hot-top">
            <img src="@/assets/images/home/hot/home-hot.png" alt="">
            <span class="hot-title">本周热门榜单</span>
            <span class="hot-all">全部榜单 &gt;</span>
        </div>
        <div class="hot-scroll">
            <ul class="hot-list">
                <li class="hot-item" v-for="item in hotList" :key="item.id">
                    <img :src="item.imgUrl" alt="">
                    <p>{{item.name}}</p>
                    <p><span class="hot-mark">{{item.price}}</span> 起</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
    name : "home-hot",
    data(){
        return {
            hotList : []
        }
    },
    methods : {
        getHotList : function(){
            this.$axios.get("/api/dataHome.json")
                .then(res => {
                    const data = res.data.data;
                    this.hotList = data[0].hotList;
                    $(".hot-list").width($("#hidden").width() * this.hotList.length)
                    this.hotBetterScroll();
                })
                .catch(err =>{
                    console.log(err)
                })            
        },
        hotBetterScroll : function(){
            const wrapper = document.querySelector('.hot-scroll')
            const scroll = new BScroll(wrapper,{
                scrollX: true,
                click: true
            })
        }
    },
    mounted(){
        this.getHotList();
    }
}
</script>

<style scoped>

.home-hot{ margin-top:0.02rem; }

#hidden{ width:2.4rem;}

.hot-top{ padding:0.2rem; }

.hot-top img{ position:relative; top:0.04rem;  width:0.3rem; height:0.3rem;}

.hot-top .hot-title{ font-size:0.3rem; color:#212121; font-weight:bold; }

.hot-top .hot-all{ float: right; font-size:0.24rem; color:#616161; }

.hot-list{ width:10rem; overflow-x: scroll; overflow-y: hidden;  white-space: nowrap; padding-bottom:0.25rem; }

.hot-item{ width:2rem; height:2rem; padding:0.2rem; display: inline-block; }

.hot-item img{ width:100%; height:100%; }

.hot-item p{ margin-top:0.1rem; text-align: center;}

.hot-item p span.hot-mark{ color:#ff8300; font-weight:bold;}

</style>